<template>
  <div
    class="dashboard"
    @mousemove="onmousemoveNavComponent($event)"
    @mouseup="onmouseupNavComponent($event)"
  >
    <div class="dashboard-top">
      <!-- 组件插槽1 -->
      <div
        class="dashboard-top-item slot-item"
        @drop="drop($event,1)"
        @dragover="allowDrag($event,1)"
      >
        <slot-component-list
          :slotComponent="slotComponent.slot1"
          :componentItemList="componentItemList"
        ></slot-component-list>
      </div>
      <!-- 组件插槽2 -->
      <div
        class="dashboard-top-item slot-item"
        @drop="drop($event,2)"
        @dragover="allowDrag($event,2)"
      >
        <slot-component-list
          :slotComponent="slotComponent.slot2"
          :componentItemList="componentItemList"
        ></slot-component-list>
      </div>
      <!-- 组件插槽3 -->
      <div
        class="dashboard-top-item slot-item"
        @drop="drop($event,3)"
        @dragover="allowDrag($event,3)"
      >
        <slot-component-list
          :slotComponent="slotComponent.slot3"
          :componentItemList="componentItemList"
        ></slot-component-list>
      </div>
    </div>
    <div class="dashboard-bottom">
      <!-- 组件插槽4 -->
      <div
        class="dashboard-bottom-item slot-item"
        @drop="drop($event,4)"
        @dragover="allowDrag($event,4)"
      >
        <slot-component-list
          :slotComponent="slotComponent.slot4"
          :componentItemList="componentItemList"
        ></slot-component-list>
      </div>
      <!-- 组件插槽5 -->
      <div
        class="dashboard-bottom-item slot-item"
        @drop="drop($event,5)"
        @dragover="allowDrag($event,5)"
      >
        <slot-component-list
          :slotComponent="slotComponent.slot5"
          :componentItemList="componentItemList"
        ></slot-component-list>
      </div>
      <!-- 组件插槽6 -->
      <div
        class="dashboard-bottom-item slot-item"
        @drop="drop($event,6)"
        @dragover="allowDrag($event,6)"
      >
        <slot-component-list
          :slotComponent="slotComponent.slot6"
          :componentItemList="componentItemList"
        ></slot-component-list>
      </div>
    </div>
    <div class="dashboard-component-nav-list">
      <div
        class="dashboard-component-nav-list-container"
        :class="showNavList ? 'dashboard-component-nav-list-show': 'dashboard-component-nav-list-hide'"
        @mousewheel.prevent="wheel($event)"
        ref="componentNavList"
      >
        <div
          class="dashboard-component-nav-list-container-item"
          v-for="item in componentNavList"
          :key="item.value"
          :id="item.value"
          :draggable="!showList.includes(item.value)"
          @dragstart="dragStart"
          @dragend="removeChooseBorder"
          :class="showList.includes(item.value) ? 'dashboard-component-nav-list-container-item-disable' : ''"
          @contextmenu.prevent="removeComponent(item.value)"
        >
          <div class="dashboard-component-nav-list-container-item-icon">
            <svg-icon :icon-class="item.showType"></svg-icon>
          </div>
          <div class="dashboard-component-nav-list-container-item-label">{{ item.label }}</div>
        </div>
      </div>
    </div>
    <div
      class="dashboard-component-nav-list-btn"
      :style="{top: navTop + 'px', right: navRight + 'px'}"
      @mousedown="onmousedownNavComponent($event)"
      @click="showHideNavList"
    >
      <svg-icon icon-class="menu"></svg-icon>
    </div>
  </div>
</template>

<script>
import SlotComponentList from './slotComponentList';
export default {
  components: {
    SlotComponentList
  },
  data() {
    return {
      showNavList: true,
      componentList: [],
      showList: [],
      componentItemList: [],
      componentNavList: [],
      slotComponent: {},
      moveSwich: false,
      onMouseMovePreventShowNavList: true,
      dragTarget: null,
      navTop: 10,
      navRight: 0,
      moveStartX: 0,
      moveStartY: 0,
      maxWidth: 0,
      maxHeight: 0,
      dx: 0,
      dy: 0
    };
  },
  watch: {
    componentList: {
      deep: true,
      handler(val) {
        this.slotComponent = {
          slot1: val[0],
          slot2: val[1],
          slot3: val[2],
          slot4: val[3],
          slot5: val[4],
          slot6: val[5]
        };
      }
    }
  },
  mounted() {
    this.navTop = JSON.parse(localStorage.getItem('navTop')) || 10;
    this.initComponentItemList();
  },
  methods: {
    initComponentItemList() {
      if (this.userGuardList.includes(this.guard.DeviceView)) {
        const itemList = [...this.componentItemList];
        itemList[0] = { label: '设备状态', value: 1, showType: 'pie', data: null };
        itemList[3] = { label: '设备曲线', value: 4, showType: 'line', data: null };
        itemList[1] = { label: '告警处理状态', value: 2, showType: 'pie', data: null };
        this.componentItemList = itemList;
        const compList = [...this.componentList];
        this.componentList = JSON.parse(localStorage.getItem('componentList')) || compList.concat([1, 2, 4]);
      }
      if (this.userGuardList.includes(this.guard.AlarmHistoryView)) {
        const itemList = [...this.componentItemList];
        itemList[2] = { label: '安全风险曲线', value: 3, showType: 'line', data: null };
        itemList[4] = { label: '告警推送', value: 5, showType: 'push' };
        this.componentItemList = itemList;
        const compList = [...this.componentList];
        this.componentList = JSON.parse(localStorage.getItem('componentList')) || compList.concat([3, 5]);
      }
      if (this.userGuardList.includes(this.guard.ProductView)) {
        const itemList = [...this.componentItemList];
        itemList[5] = { label: '产品重置曲线', value: 6, showType: 'line', data: null };
        itemList[6] = { label: '产品参数', value: 7, showType: 'pie', data: null };
        itemList[7] = { label: '产品升级包', value: 8, showType: 'pie', data: null };
        itemList[8] = { label: '产品类型', value: 9, showType: 'bar', data: null };
        this.componentItemList = itemList;
        const compList = [...this.componentList];
        this.componentList = JSON.parse(localStorage.getItem('componentList')) || compList.concat([7]);
      }
      this.componentNavList = this.componentItemList.filter(item => item);
      this.showList = this.componentList.filter(item => item);
    },
    wheel(event) {
      if (event.wheelDelta > 0) {
        this.$refs.componentNavList.scrollLeft += -100;
      } else {
        this.$refs.componentNavList.scrollLeft += 100;
      }
    },
    showHideNavList() {
      if (this.onMouseMovePreventShowNavList) {
        if (this.showNavList) {
          this.showNavList = false;
        } else {
          this.showNavList = true;
        }
      }
      this.onMouseMovePreventShowNavList = true;
    },
    dragStart(event) {
      event.dataTransfer.setData('Text', event.target.id);
    },
    allowDrag(event, index) {
      if (index < 7) {
        document.getElementsByClassName('slot-item').forEach(item => (item.style.border = ''));
        document.getElementsByClassName('slot-item')[index - 1].style.border = '1px solid #bcc4ec';
      } else {
        document.getElementsByClassName('slot-item').forEach(item => (item.style.border = ''));
      }
      event.preventDefault();
    },
    removeChooseBorder() {
      document.getElementsByClassName('slot-item').forEach(item => (item.style.border = ''));
    },
    drop(event, index) {
      event.preventDefault();
      let compList = [...this.componentList];
      compList[index - 1] = parseInt(event.dataTransfer.getData('Text'));
      this.componentList = compList;
      this.showList = this.componentList.filter(item => item);
      localStorage.setItem('componentList', JSON.stringify(this.componentList));
    },
    removeComponent(index) {
      const removeIndex = this.componentList.findIndex(item => item == index);
      let compList = [...this.componentList];
      compList[removeIndex] = undefined;
      this.componentList = compList;
      this.showList = this.componentList.filter(item => item);
      localStorage.setItem('componentList', JSON.stringify(this.componentList));
    },
    onmousedownNavComponent(event) {
      if (!this.moveSwich) {
        this.moveSwich = true;
        this.moveStartX = event.screenX;
        this.moveStartY = event.screenY;
        this.dx = this.navRight;
        this.dy = this.navTop;
      }
    },
    onmousemoveNavComponent(event) {
      if (this.moveSwich) {
        this.onMouseMovePreventShowNavList = false;
        this.navTop = this.dy + event.screenY - this.moveStartY;
        if (this.navRight >= 0) {
          this.navRight = this.dx + this.moveStartX - event.screenX;
        } else this.navRight = 0;
      }
    },
    onmouseupNavComponent(event) {
      if (this.moveSwich) {
        this.moveSwich = false;
        this.navRight = 0;
        localStorage.setItem('navTop', JSON.stringify(this.navTop));
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.dashboard {
  -webkit-user-select: none;
  user-select: none;
  &-component-nav-list-btn {
    position: absolute;
    top: -2px;
    right: 0;
    width: 48px;
    height: 46px;
    padding-top: 1px;
    font-size: 40px;
    color: rgba($color: #fff, $alpha: 0.6);

    text-align: center;
    background-color: rgba(124, 124, 124, 0.6);
    border-radius: 10px;
  }
  .dashboard-component-nav-list-btn:hover {
    color: #fff;
    background-color: rgba(124, 124, 124, 0.8);
  }
  &-chart {
    width: 100%;
    height: 100%;
  }
  // background-color: #ccc;
  height: calc(100vh - 120px);
  min-height: 600px;
  position: relative;
  &-top {
    background-color: #f0f0f0;
    height: 50%;
    display: flex;
    &-item {
      flex: 0 10px 0 10px;
      background-color: #fff;
      height: calc(100% - 15px);
      width: calc((100% - 20px) / 3);
      margin: 10px 10px 0 0;
    }
    &-item:nth-child(1) {
      margin-left: 10px;
    }
  }
  &-bottom {
    background-color: #f0f0f0;
    height: 50%;
    display: flex;
    &-item {
      flex: 0 10px 0 10px;
      background-color: #fff;
      height: calc(100% - 15px);
      width: calc((100% - 20px) / 3);
      margin: 5px 10px 0 0;
    }
    &-item:nth-child(1) {
      margin-left: 10px;
    }
  }
  &-component-nav-list {
    top: -45px;
    right: calc(50vw - 300px);
    min-width: 20px;
    position: absolute;
    &-container {
      // background-color: pink;
      white-space: nowrap;
      overflow-x: scroll;
      overflow-y: hidden;
      border-radius: 5px;
      width: 0px;
      &-item {
        display: inline-block;
        height: 60px;
        width: 100px;
        padding: 10px 5px 5px 5px;
        background-color: rgba(92, 92, 92, 0.6);
        color: #fff;
        &-icon {
          text-align: center;
          font-size: 28px;
        }
        &-label {
          text-align: center;
        }
      }
      &-item:nth-child(1) {
        border-radius: 5px 0 0 5px;
      }
      &-item:last-child {
        border-radius: 0 5px 5px 0;
      }
      &-item-disable {
        // cursor: not-allowed;
        color: rgba($color: #fff, $alpha: 0.4);
        background-color: rgba(92, 92, 92, 0.6);
      }
      // &-item:nth-child(1) {
      //   margin-left: 5px;
      // }
    }
    &-container::-webkit-scrollbar-corner {
      background: transparent;
    }
    &-container::-webkit-scrollbar {
      /*滚动条整体样式*/
      width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
      height: 8px;
      scrollbar-arrow-color: red;
    }
    &-container::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 5px;
      -webkit-box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
      box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
      background: rgba(232, 214, 214, 0.6);
      scrollbar-arrow-color: red;
    }
    &-container::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      -webkit-box-shadow: inset 0 0 5px transparent;
      // box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
      border-radius: 0;
      background: transparent;
    }
    &-show {
      transition: 1s;
    }
    &-hide {
      width: 600px;
      transition: 1s;
    }
  }
}
</style>
